import { useEffect,useState,If } from "react"
import { queryPower } from "../../utils/request/api"
import { 
    SolutionOutlined,
    TeamOutlined,
    UserOutlined,
    SelectOutlined,
    ReadOutlined,
    TagOutlined,
    KeyOutlined,
    LogoutOutlined
     } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu,Row,Col,Dropdown } from 'antd';
import logo from "../../img/logo.png"
import session from "../../utils/storage/session";
// import {Route,Redirect} from "react-router-dom"
// import Index from "./Index";
import router from "./router";
import { Redirect } from "react-router-dom";
const { Header, Content, Sider } = Layout;
const icon={
    auth:<UserOutlined />,
    emp:<TeamOutlined />,
    assess:<SolutionOutlined />,
    train:<SelectOutlined />,
    approval:<ReadOutlined />
}
export default (props)=>{
    let [menu,setMenu]=useState([])
    let [routeList,setRouteList]=useState([])
    let [openKeys,setOpenKeys]=useState([])
    let [selectedKeys,setSelectedKeys]=useState([])
    useEffect(()=>{
        getPower()
       
    },[])
    const checkRoute=(cut='')=>{
        // console.log(props);
        let curoute=cut||props.location.pathname.split("/")[2]
        // console.log(curoute);
        routeList=[]
        openKeys=[]
        menu.map(v=>{
          
              v.children.map(i=>{
                  if(curoute==i.key){
                      openKeys.push(v.key)
                      selectedKeys=[i.key]
                      routeList.push(v.label)
                      routeList.push(i.label)
                  }
              })
          
        })
        // console.log(routeList);
        setOpenKeys([...openKeys])
        setSelectedKeys(selectedKeys)
        // console.log(openKeys);
        setRouteList(routeList)
    }
    const getPower=()=>{// 获取菜单
        queryPower()
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                // let arr=res.data
                menu=res.data.map((v,k)=>{
                    let obj={
                        key:v.powerUrl,
                        icon:icon[v.powerUrl],
                        label:v.powerName,
                        children:[]
                    }
                   obj.children= v.children.map((i,j)=>{
                        return {
                            key:i.powerUrl,
                            icon:<TagOutlined />,
                            label:i.powerName,
                        }
                    })
                    return obj
                })
                setMenu(menu)
                checkRoute()
            }
        })
    }
    const menus = (
        <Menu
          items={[
            {
              key: '1',
              label: (
                <span>{session.get("userinfo").userName}</span>
              ),
              icon:<UserOutlined/>
            },
            {
              key: '2',
              label: (
                <span>
                    {session.get("userinfo").passWord}
                </span>
              ),
              icon:<KeyOutlined />
            },
            {
              key: '3',
              label: (
               <span>
                登出
               </span>
              ),
             icon:<LogoutOutlined />,
             onClick:()=>{
                // console.log(666666);
                session.remove("token")
                session.remove("userinfo")
                props.history.push("/login")
             }
            }
            
          ]}
        />
      );
    return <div>

        <Layout>
            <Header
             style={{
                height:"8vh",
                background:'#212122',
                color:'white'
            }} className="header">
                 <Row>
                   <Col span={20}>
                   <div className="logo" >
                        <img style={{
                            width:50,
                            height:50
                        }} src={logo} alt="" />
                    </div>
                   </Col>
                   <Col span={4} style={{
                    //  border:"1px solid red"
                    // display:'flex'
                   }}>
                      
                      <Dropdown overlay={menus}>
                        <a style={{
                            // border:"1px solid red",
                            display:'block',
                            width:"100px",
                            margin:"0 auto",
                            textAlign:'center'
                            }}>{session.get("userinfo").userName}</a>
                    </Dropdown>
                   </Col>
                </Row>
            
            {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} /> */}
            </Header>
            <Layout>
            <Sider style={{
                height:"92vh",
                background:'#373738'
            }} width={200} className="site-layout-background">
                <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={[]}
                defaultOpenKeys={openKeys}
                openKeys={openKeys}
                selectedKeys={selectedKeys}
                onOpenChange={(val)=>{
                    // console.log(val);// 展开的数组
                    // openKeys.shift()
                    if(val.length>=2){// 手风琴效果
                        val.shift()
                    }
                    setOpenKeys(val)
                }}
                onClick={(val)=>{
                //   console.log(val);
                //  console.log(menu);
                  
                  props.history.push("/main/"+val.key)
                //   console.log(props);
                  checkRoute(val.key)
                }}
                style={{
                    height: '100%',
                    borderRight: 0,
                   

                }}
                items={menu}
                />
            </Sider>
            <Layout
                style={{
                padding: '0 10px 10px',
                }}
            >
                <Breadcrumb
                style={{
                    margin: '16px 0',
                }}
                >
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <If isShow={routeList.length}>
                    <Breadcrumb.Item>{routeList[0]}</Breadcrumb.Item>
                    <Breadcrumb.Item>{routeList[1]}</Breadcrumb.Item>
                </If>
                </Breadcrumb>
                <Content
                className="site-layout-background"
                style={{
                    padding: 10,
                    margin: 0,
                    minHeight: 280,
                    background:'white'
                }}
                >
                  {/* <Route path={"/main/index"} component={Index} /> */}
                  
                  {router}
                  {/* <Redirect from="/main" to={"/main/index"}/> */}
                </Content>
            </Layout>
            </Layout>
        </Layout>
    </div>
}